<template>
  <!-- 使用页面添加 <pagination :pagination="pagination1" @changepage="getUser" /> data: pagination1: {}
  methods: getUser(pageNum = 1)-->
  <div class="g-footer">
    <el-row type="flex" class="row-bg" justify="space-between">
      <el-col :span="24" class="footer-right">
        <div>
          <el-pagination
            background
            :current-page="pagination.pageNum"
            :pager-count="5"
            :page-size="pagination.pageSize"
            layout="total, prev, pager, next, jumper"
            :total="pagination.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  name: 'Pagination',
  props: ['pagination'],
  methods: {
    changePage(pageNum) {
      this.$emit('changepage', pageNum)
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      const pageNum = val
      // if (pageNum = l) { return }
      this.changePage(pageNum)
      console.log(`当前页: ${val}`)
    }
  }
}
</script>
<style lang="scss">
.g-footer {
  margin-top: 20px;
  .footer-right {
    text-align: right;
  }
  .el-pager li {
    padding: 0 18px !important;
    height: 40px !important;
    line-height: 40px !important;
  }
  .el-pagination span {
    font-size: 16px;
    line-height: 40px;
  }
  .el-pagination.is-background .btn-prev,
  .el-pagination.is-background .btn-next {
    min-width: 40px;
  }
  .el-pagination button {
    min-width: 40px;
    height: 40px;
  }
  .el-pagination__editor.el-input .el-input__inner {
    height: 36px;
    font-size: 16px;
  }
}
</style>
